<template>
  <div>
    <div class="md-subhead"><span>HLS Live / 直播</span></div>
    <div class="item">
      <div class="player">
        <video-player :playsinline="true"  class="vjs-custom-skin" :options="playerOptions" @ready="playerReadied"></video-player>
      </div>
    </div>
  </div>
</template>

<script>
  import '@/assets/css/custom-theme.css';
  import videojs from 'video.js';
  window.videojs = videojs;
  require('videojs-contrib-hls/dist/videojs-contrib-hls.js');
  export default {
    props: {
      cover: {
        type: String
      },
      device_url: {
        type: String
      },
    },
    data() {
      return {
        playerOptions: {
          height: '210',
          sources: [{
            withCredentials: false,
            type: 'application/x-mpegURL',
            // src: 'http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8'
            src: this.device_url
          }],
          controlBar: {
            timeDivider: false,
            durationDisplay: false
          },
          flash: {
            hls: {
              withCredentials: false
            }
          },
          html5: {
            hls: {
              withCredentials: false
            }
          },
          // poster: 'https://surmon-china.github.io/vue-quill-editor/static/images/surmon-5.jpg'
          poster: this.cover
        }
      };
    },
    created() {
      // this.changePlayerUrl();
    },
    methods: {
      playerReadied(player) {
        var hls = player.tech({
          IWillNotUseThisInPlugins: true
        }).hls;
        player.tech_.hls.xhr.beforeRequest = function(options) {
          return options;
        };
      },
      changePlayerUrl() {
        this.playerOptions.sources[0].src = 'http://live.us.sinaimg.cn/000e0QuGjx07r9yBsV3N070d01000fh50k01.m3u8';
      }
    }
  };
</script>
